<template>
  <div>
    <div class="normal-box-top">
      <div class="box-bg">
        <div class="box-content">
          <div class="item-title"></div>
          <!--中教课-->
          <div v-if="normalData && normalData.chinese" class="content-item">
            <div class="content-item-title">
              <div class="item-title-bg">
                <span class="item-class-star item-class-star-left"></span>
                <div class="item-class-type"><span>中教课</span><i class="item-class-count"></i></div>
                <span class="item-class-star item-class-star-right"></span>
              </div>
            </div>
            <ul class="content-item-list">
              <li class="content-item-unit">
                <div class="item-unit-recoder">
                  <div class="item-unit-number">{{normalData.chinese.sign}}</div>
                  <div class="item-unit-total" v-if="normalData.chinese.maxsign">/{{ normalData.chinese.maxsign }}次
                  </div>
                </div>
                <div class="item-unit-text">直播出勤</div>
              </li>
              <li class="content-item-unit">
                <div class="item-unit-recoder">
                  <div class="item-unit-number">{{normalData.chinese.worksubmit}}</div>
                  <div class="item-unit-total">/{{ normalData.chinese.maxworksubmit }}次</div>
                </div>
                <div class="item-unit-text">作业提交</div>
              </li>
              <li class="content-item-unit">
                <div class="item-unit-recoder">
                  <div class="item-unit-number">{{normalData.chinese.workcorrect}}</div>
                  <div class="item-unit-total">/{{ normalData.chinese.maxworkcorrect }}次</div>
                </div>
                <div class="item-unit-text">作业订正</div>
              </li>
              <li class="content-item-unit">
                <div class="item-unit-recoder">
                  <div class="item-unit-number">{{normalData.chinese.speaktime}}</div>
                  <div class="item-unit-total">/分钟</div>
                </div>
                <div class="item-unit-text">开口时长</div>
              </li>
            </ul>
          </div>
          <!--话术-->
          <text-modal v-if="normalData && normalData.chinese">
            <p slot="normal-chanese-message-tip">
              家长您向下拉可以看到孩子近段时间在直播学习中的整体情况，在这里我们可以到孩子在中文教师课和外语教师课的不同情况，包括直播出勤、开口时长、作业提交、作业订正情况这四个部分的内容。咱们一起看一下。
            </p>
            <p slot="normal-chanese-message-all" v-if="normalData.chinese.flag && normalData.chinese.flag==1">
              中教课程总完成率较低
              第一个部分是孩子在中教课的表现，孩子可能是因为某些原因，在报告中整体反馈出来的还是有待提高的。其实对于孩子的整体提升来说，每一个环节都是不可缺少的。拿单词来说它是英语基础。是一定要背诵和练习的，其实咱们老师在课上都会讲一下单词的拼写或者注意点，平时一定要课上认真记录，课后用咱们的单词闯关功能好好操练，否则资源就浪费啦。
            </p>
            <p slot="normal-chanese-message-all" v-if="normalData.chinese.flag && normalData.chinese.flag==2">
              中教课程总完成率中等
              第一个部分是孩子在中教课的表现，可以看出孩子在跟中教学习的过程中整体表现还不错，非常开心能看到他的每一次的坚持。您也知道英语的学习是一个连贯的过程，每一次的课堂学习、课下巩固都是非常重要的，少了任何一个环节都可能会影响他的整个学习效果。（可展开说下具体某项过低以及该项上升后达到的效果）之后也希望您能监督他的每一个部分的完成情况，前期也可以先帮他做好规划，我也会关注他每一次的进步，多鼓励他。相信孩子把这些都做到了，会让我们也让您刮目相看！
            </p>
            <p slot="normal-chanese-message-all" v-if="normalData.chinese.flag && normalData.chinese.flag==3">
              中教课程总完成率较高
              第一个部分是孩子在中教课的表现，可以看出孩子在跟中教学习的过程中整体表现还是非常棒的，各个部分都有很好的反馈，这说明咱们家孩子很喜欢中教的课程，对咱们的中教老师和课程设计都很满意，相信孩子这段时间学习过后，英语能力肯定有了很大的提升，老师非常高兴能看到孩子这样的情况，英语学习是持续的，后续强力保持也是至关重要的。希望在之后的日子中我和XX老师依然能陪伴孩子不断成长！
            </p>
          </text-modal>
          <text-modal v-if="normalData && normalData.chinese">
            <p slot="normal-chanese-message-speak-tip">
              我们重点看一下中教课堂这个蓝色的圆，这里是对孩子在中教课堂上开口时间的一个统计，这也是我们关注的一个重点。
            </p>
            <p slot="normal-chanese-message-speak"
               v-if="normalData.chinese.speakflag && normalData.chinese.speakflag==1">
              开口时长较少
              从时长统计可以看出，孩子在中教课上的开口时间相对较少，但是很高兴看到孩子已经参与到课堂中，开始跟着老师说英语了，这已经是很大的突破了。孩子是不是性格比较腼腆啊？
              <span class="message-text-distance">情况一：是的，天生不爱说话
            孩子天生不爱说话可能是因为他对自己不太自信，不确定自己说的对不对，所以也就不愿意表达自己，这样的小孩子都是惹人怜爱的小天使。我们要做的就是多多的鼓励她，夸奖她，让她敢于大声说话，敢于表达自己，我相信只要我们用心的爱孩子，她就会有足够的安全感，就会自信起来。以后我也会多多的鼓励孩子，只要她超越了自己，就应该得到夸奖，也希望家长您跟配合起来，让她在鼓励和夸奖中把信心树立起来，我相信她会越来越好。
            </span>
              <span class="message-text-distance">情况二：不是，就在上课的时候不爱说
            孩子可能还没有适应线上的教学方式，不习惯跟着老师一起说话，出现这样的情况是很正常的，家长您也不用着急，只要我们好好的引导，孩子就会逐渐习惯的。您知道吗，据研究表明，所有的语言都是说的越多学的越好，开口说英语不仅可以锻炼孩子的口语水平，还能加深知识的记忆，形成语感，最重要的是可以增强英语学习的自信心。所以开口说英语是非常必要的，希望家长您可以监督一下孩子每节课的上课状况，尽量让她有仪式感的来对待每一节课，我也会多多鼓励她，让她树立自信心，相信在以后的学习中能看到她的不断进步
            </span>
            </p>
            <p slot="normal-chanese-message-speak" v-if="normalData.chinese.flag && normalData.chinese.speakflag==2">
              开口时长中等
              从时长统计可以看出，孩子每次中教课的开口时间处于中等上下浮动；这说明孩子已经开始慢慢习惯也逐渐喜欢上跟老师一起互动了，很高兴能看到孩子的进步。您知道吗，据研究表明，所有的语言都是说的越多学的越好，开口说英语不仅可以锻炼孩子的口语水平，还能加深知识的记忆，形成语感，最重要的是可以增强英语学习的自信心。所以以后希望您能多多的监督孩子去完成每节课的开口任务，我也会多更多的去鼓励她，相信我们可以看到孩子的不断进步。
            </p>
            <p slot="normal-chanese-message-speak" v-if="normalData.chinese.flag && normalData.chinese.speakflag==3">
              开口时长较长
              从报告上可以看出孩子开口时间超过了同期的大部分小朋友，做的非常好。咱们主讲老师也经验丰富，知道哪里引导孩子开口。在大家的配合和鼓励下，孩子现在基本可以说养成课上跟读、开口说的好习惯。之后继续加油，争取以后锻炼好口语多参加演讲比赛进行历练！
            </p>
          </text-modal>
          <!--外教课-->
          <div v-if="normalData && normalData.foreign" class="content-item">
            <div class="content-item-title content-item-title-dark">
              <div class="item-title-bg">
                <span class="item-class-star item-class-star-left"></span>
                <div class="item-class-type"><span>外教课</span><i class="item-class-count"></i></div>
                <span class="item-class-star item-class-star-right"></span>
              </div>
            </div>
            <ul class="content-item-list">
              <li class="content-item-unit">
                <div class="item-unit-recoder">
                  <div class="item-unit-number">{{normalData.foreign.sign}}</div>
                  <div class="item-unit-total" v-if="normalData.foreign.maxsign">/{{normalData.foreign.maxsign}}次</div>
                </div>
                <div class="item-unit-text">直播出勤</div>
              </li>
              <li class="content-item-unit">
                <div class="item-unit-recoder">
                  <div class="item-unit-number">{{normalData.foreign.worksubmit}}</div>
                  <div class="item-unit-total">/{{normalData.foreign.maxworksubmit}}次</div>
                </div>
                <div class="item-unit-text">作业提交</div>
              </li>
              <li class="content-item-unit">
                <div class="item-unit-recoder">
                  <div class="item-unit-number">{{normalData.foreign.workcorrect}}</div>
                  <div class="item-unit-total">/{{normalData.foreign.maxworkcorrect}}次</div>
                </div>
                <div class="item-unit-text">作业订正</div>
              </li>
              <li class="content-item-unit">
                <div class="item-unit-recoder">
                  <div class="item-unit-number">{{normalData.foreign.speaktime}}</div>
                  <div class="item-unit-total">/分钟</div>
                </div>
                <div class="item-unit-text">开口时长</div>
              </li>
            </ul>
          </div>
          <!--外教课话术-->
          <text-modal v-if="normalData && normalData.foreign">
            <p slot="normal-foreign-message-all" v-if="normalData.foreign.flag && normalData.foreign.flag==1">
              外教课程总完成率较低
              我们往下看是孩子在外教课上的表现，从整体表现上来看，孩子还是有待提高的。孩子可能是之前上中教课比较多，对于外教课的学习还没有培养出很高的兴趣，这也是一个慢慢转变的过程，首先咱家长也要达成共识，纯中或者纯外的课程是有一定的弊端的。所以外教课同样重要。不仅可以让孩子练习口语，跟着外教老师了解外国人的说话方式和文化传统，课前课后每样都不能少啊。
            </p>
            <p slot="normal-foreign-message-all" v-if="normalData.foreign.flag && normalData.foreign.flag==2">
              外教课程总完成率中等
              孩子在跟外教学习的过程中，整体表现的还可以，基本达到了班级平均水平，这说明孩子已经开始慢慢接受这样的教学模式，也逐渐喜欢上了咱们的外教老师。以我对孩子的了解，他还是有很大的进步空间的，孩子很聪明，在适应的过程中，后面需要慢慢提高要求，争取能够在往上进阶一下。（可展开说孩子做的不够好的具体一项）我对她很有信心，希望她在接下来的学习中会有更好的表现。
            </p>
            <p slot="normal-foreign-message-all" v-if="normalData.foreign.flag && normalData.foreign.flag==3">
              外教课程总完成率较高
              我们往下看是孩子在外教课上的表现，根据我们统计的数据，孩子在跟外教老师学习的过程中整体情况特别的棒，看来还是很喜欢咱们的外教课的；在接下来的日子里，希望孩子能够继续保持，环境的浸泡对语言的学习和听口的提升是非常重要的！
            </p>
          </text-modal>
          <text-modal v-if="normalData && normalData.foreign">
            <p slot="normal-foreign-message-speak-tip">
              看完了中教课的开口时长，我们再重点看一下孩子在外教课上的时间统计。这个也是我们重点关注的部分，因为您也知道，学习口语肯定还是跟着外教学习更好。
            </p>
            <p slot="normal-foreign-message-speak"
               v-if="normalData.foreign.speakflag && normalData.foreign.speakflag==1">
              开口时长较少
              孩子在外教课上的开口时长相对较少，孩子可能刚开始跟着外教学习英语，还不太习惯，这需要一个逐渐习惯的过程。但是外教课是非常好培养口语、语感的机会，上网课，孩子开口也不受干扰，不用害羞。慢慢来，家长这边陪着孩子上课多提醒多鼓励，这样形成良性循环后会达到很好的效果。
            </p>
            <p slot="normal-foreign-message-speak"
               v-if="normalData.foreign.speakflag && normalData.foreign.speakflag==2">
              开口时长中等
              孩子在外教课上开口时间达到了同期孩子的平均水平，这说明孩子已经渐渐喜欢上了外教老师和课程，很高兴孩子能有现在的学习效果。希望之后更加努力，抓住一切可以开口的机会，以后见了外国人可以勇敢的表现自己。孩子很聪明也很优秀，她有潜力做的更好，我也会更多的鼓励她，表扬她，相信她会成为同龄人中英语学习的榜样。
            </p>
            <p slot="normal-foreign-message-speak"
               v-if="normalData.foreign.speakflag && normalData.foreign.speakflag==3">
              开口时长较长
              从时长统计可以看出，孩子在外教课上很喜欢说英语，参与度特别的高，开口时长遥遥领先，说明这位外教老师已经得到了孩子的认可，很高兴看到孩子有这样的学习效果。希望孩子在以后的外教课学习中，依然可以保持现在的热情，跟着老师大声说英语，练习自己的口语能力，让自己拥有一口纯正的英语发音，相信她会成为同龄人里的佼佼者！
            </p>
          </text-modal>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import TextModal from '@/components/textModal'

  export default {
    props: ['normalData'],
    components: {
      TextModal
    }
  }
</script>
<style type="text/css" scoped>
  .item-unit-total {
    font-size: .2rem;
  }

  .item-unit-number {
    font-size: .44rem;
    line-height: .4rem;
    font-weight: 500;
  }

  .item-unit-text {
    font-size: .28rem;
    text-align: center;
    color: #222;
    font-weight: 500;
    margin-top: .1rem;
  }

  .content-item-unit:nth-of-type(4) .item-unit-recoder {
    background-color: #5995ef;
  }

  .content-item-unit:nth-of-type(3) .item-unit-recoder {
    background-color: #f67238;
  }

  .content-item-unit:nth-of-type(2) .item-unit-recoder {
    background-color: #7ed46a;
  }

  .item-unit-recoder {
    padding-top: .2rem;
    color: #fff;
    width: 1.08rem;
    height: 1.08rem;
    background-color: #f8be17;
    border-radius: 50%;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;

  }

  .content-item-unit {
    flex: 1;
    align-items: center;
  }

  .content-item-list {
    width: 100%;
    height: 1.48rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .item-class-type {
    font-weight: bolder;
    color: #f96900;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
  }

  .item-class-count {
    font-style: normal;
    display: inline-block;
    width: .58rem;
    height: .28rem;
    background: url('../assets/img/four.png') no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
  }

  .item-class-type > span {
    line-height: .48rem;
    font-size: .3rem;
    vertical-align: middle;
  }

  .item-class-star-right {
    right: .2rem;
  }

  .item-class-star-left {
    left: .2rem;
  }

  .item-class-star {
    position: absolute;
    top: .14rem;
    display: inline-block;
    width: .18rem;
    height: .18rem;
    background: url('../assets/img/star_o.png') no-repeat;
    background-size: 100% 100%;
  }

  .content-item-title-dark .item-title-bg {
    background-color: #ffe5d9;
    box-shadow: 0px 3px 0px -1px #ffba89;
  }

  .content-item-title-dark .item-class-count {
    background: url('../assets/img/eight.png') no-repeat;
    background-size: 100% 100%;
  }

  .item-title-bg {
    width: 2.8rem;
    height: .48rem;
    border-radius: .24rem;
    background-color: #fff3cb;
    box-shadow: 0px 3px 0px -1px #f5d887;
    box-sizing: border-box;
  }

  .content-item-title {
    position: relative;
    margin: .5rem auto .32rem;
    width: 2.8rem;
    height: .5rem;
    box-sizing: border-box;
  }

  .content-item {
    padding: 0 .2rem;
    font-size: .28rem;
    color: #222;
    box-sizing: border-box;
  }

  .item-title {
    margin: 0 auto;
    width: 4.9rem;
    height: .6rem;
    background: url('../assets/img/normal_title.png') no-repeat;
    background-size: 100% 100%;

  }

  .box-content {
    padding-top: .6rem;
  }

  .box-bg {
    width: 100%;
    padding-bottom: .4rem;
    background: url('../assets/img/stage_bg.png') repeat .14rem 0;
    background-size: .22rem .22rem;
    box-sizing: border-box;
  }

  .normal-box-top {
    padding-top: .4rem;
    width: 100%;
    background: url('../assets/img/normal_swav_bg.png') no-repeat;
    background-size: 100% .44rem;
  }
</style>
